import React, { useState } from "react";
import { DownOutlined } from "@ant-design/icons";
import { Dropdown, Space, Typography } from "antd";
import { useNavigate } from "react-router-dom";
import "./index.scss";
const items = [
  {
    key: "1",
    label: "个人信息",
  },
  {
    key: "2",
    label: "退出登录",
  },
];

const Head = () => {
  const [state, setState] = useState("0");
  const navigate = useNavigate();
  const onClick = ({ key }) => {
    console.log("key ", key);
    if (key === "2") {
      window.location.href = "/login";
      localStorage.removeItem("token");
    } else {
      navigate("system/personal");
    }
  };

  return (
    <Dropdown
      menu={{
        items,
        selectable: true,
        defaultSelectedKeys: [state],
        onClick,
      }}
      trigger={["click"]}
    >
      <a onClick={(e) => e.preventDefault()}>
        <Space>
          管理员
          <DownOutlined />
        </Space>
      </a>
    </Dropdown>
  );
};

export default Head;
